<template>
  <div class="container">
    <el-card class="left">
      <div class="personInfo">个人信息</div>
      <userInfoCpn />
    </el-card>
    <el-card class="right">
      <div class="personInfo">完善/修改信息</div>
      <modifyInformationCpn />
    </el-card>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import userInfoCpn from './cpn/userInfo.vue'
import modifyInformationCpn from './cpn/modifyiInformation.vue'
</script>
<style lang="less" scoped>
.container {
  padding: 10px;
  width: 100%;
  height: 80%;
  display: flex;
  .left {
    flex: 1;
    display: flex;
    // align-items: center;
    /deep/.el-card__body {
      width: 100%;
    }
    .personInfo {
      font-weight: 700;
      font-size: 20px;
    }
  }
  .right {
    flex: 3;
    margin-left: 10px;
    .personInfo {
      font-weight: 700;
      font-size: 20px;
    }
  }
}
</style>